import UserLayout from "./index";
import router from "next/router";
import { Form, Input, Button, Icon, message } from "antd";
import axios from "../../utils/axios";
function UserAdd(props) {
  const { getFieldDecorator } = props.form;
  async function handleSubmit(event) {
    event.preventDefault();
    let values = props.form.getFieldsValue();
    let response = await axios.post("/api/register", values);
    if (response.data.code === 0) {
      console.log(response);

      router.push("/user/list");
    } else {
      message.error("添加用户失败");
    }
  }
  return (
    <UserLayout>
      <Form
        onSubmit={handleSubmit}
        className="login-form"
        style={{ maxWidth: "300px" }}
      >
        <Form.Item>
          {getFieldDecorator("username", {
            rules: [{ required: true, message: "Please input your username!" }],
          })(
            <Input
              prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />}
              placeholder="Username"
            />
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator("password", {
            rules: [{ required: true, message: "Please input your Password!" }],
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
              type="password"
              placeholder="Password"
            />
          )}
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            添加用户
          </Button>
        </Form.Item>
      </Form>
    </UserLayout>
  );
}
export default Form.create({ name: "UserAdd" })(UserAdd);
